<template>
    <div   >
        <div class="pkh">
        <div class="app" >
            <a download href="https://wssbsd789.oss-cn-beijing.aliyuncs.com/dly-p-m.zip"> <div class="bt1" >下载插件(通用版)</div></a>
            <a download href="https://wssbsd789.oss-cn-beijing.aliyuncs.com/dly-p-m.crx"><div class="bt1-1">下载插件(360安装包)</div></a>
        </div>
        </div>
        <div style="padding:50px 20%;position: relative;" >
            <el-row style="text-align: center;">
                <el-col :span="3"><div class="title_bt">插件</div></el-col>
                <el-col :span="3">
                    <div class="grid-content bg-purple">
                       <img class="img_ll" src="../../../public/img/360.png" alt=""> 
                        <div>360浏览器</div>
                </div>
            </el-col>
                <el-col :span="3">
                    <div class="grid-content bg-purple">
                        <img class="img_ll" src="../../../public/img/uc.png" alt=""> 
                         <div>UC浏览器</div>
                    </div>
                </el-col>
                <el-col :span="3"><div class="grid-content bg-purple">
                    <img class="img_ll" src="../../../public/img/360js.png" alt=""> 
                         <div>360极速浏览器</div>
                </div></el-col>
                <el-col :span="3"><div class="grid-content bg-purple">
                    <img class="img_ll" src="../../../public/img/qq.png" alt=""> 
                         <div>qq浏览器</div>
                </div></el-col>
                <el-col :span="3"><div class="grid-content bg-purple">
                    <img class="img_ll" src="../../../public/img/2345.png" alt=""> 
                    <div>2345浏览器</div>
                </div></el-col>
                <el-col :span="3"><div class="grid-content bg-purple">
                    <img class="img_ll" src="../../../public/img/gg.png" alt=""> 
                    <div>谷歌浏览器</div>
                </div></el-col>
                <el-col :span="3"><div class="grid-content bg-purple">
                    <img class="img_ll" src="../../../public/img/edg.png" alt=""> 
                    <div>Edge</div>
                </div></el-col>
              </el-row>
              <el-divider></el-divider>
              <el-row  style="text-align: center;">
                <el-col :span="3"><div class="title_bt">
                    教程
                </div></el-col>
                <el-col :span="3">
                    <div @click="jc_ship" class="grid-content bg-purple">
                       <img class="img_ll" src="../../../public/img/360.png" alt=""> 
                        <div >360浏览器</div>
                </div>
            </el-col>
                <el-col :span="3">
                    <div @click="jc_ship" class="grid-content bg-purple">
                        <img class="img_ll" src="../../../public/img/uc.png" alt=""> 
                         <div>UC浏览器</div>
                    </div>
                </el-col>
                <el-col :span="3"><div @click="jc_ship" class="grid-content bg-purple">
                    <img class="img_ll" src="../../../public/img/360js.png" alt=""> 
                         <div>360极速浏览器</div>
                </div></el-col>
                <el-col :span="3"><div @click="jc_ship" class="grid-content bg-purple">
                    <img class="img_ll" src="../../../public/img/qq.png" alt=""> 
                         <div>qq浏览器</div>
                </div></el-col>
                <el-col :span="3"><div @click="jc_ship" class="grid-content bg-purple">
                    <img class="img_ll" src="../../../public/img/2345.png" alt=""> 
                    <div>2345浏览器</div>
                </div></el-col>
                <el-col :span="3"><div @click="jc_ship" class="grid-content bg-purple">
                    <img class="img_ll" src="../../../public/img/gg.png" alt=""> 
                    <div>谷歌浏览器</div>
                </div></el-col>
                <el-col :span="3"><div @click="jc_ship" class="grid-content bg-purple">
                    <img class="img_ll" src="../../../public/img/edg.png" alt=""> 
                    <div>Edge</div>
                </div></el-col>
              </el-row>
        </div>
       

    </div>
</template>
<script>
  
    export default {
        components: {
        },
        data() {
            return {
                
            };
        },
        created() {
      
      
          
        },
        methods: {
            jc_ship(){
                window.open('https://tos2h6nm49.feishu.cn/docx/SOvSdRrA6oSYSCxip41cgJ5sn6b?from=from_copylink')
            }
        }
    }
</script>
<style lang="less">
    .pkh{
    width: 100%;
    height:540px;
    position:relative ;
    }
 .app{
    background: url('../../../public/img/banner.jpg') no-repeat center center ;
    /* background-attachment: fixed; */
   /* background-attachment: fixed; */
   width: 100%;
    height:100%;
    background-size: cover;
   
 }
 .title_jz{
    font-size: 2rem;
    color: #fff;
    line-height: 5rem;
    position: absolute;
    left:40%
 }
 .bt1{
    position: absolute;
    background-color: #fff;
    left:62.5rem;
    top:22.75rem;
    border-radius: 20px 20px 20px 20px;
    padding:10px;
    margin-left: 1px;
    font-size: 1.875rem;
    cursor: pointer;
 }
 .bt1-1{
    position: absolute;
    background-color: #fff;
    border-radius: 20px 20px 20px 20px;
    left:62.5rem;
    top:27.25rem;
    padding:10px;
    margin-left: 1px;
    font-size: 1.875rem;
    cursor: pointer;
 }
 .title_bt{
    writing-mode: vertical-rl;
    font-size: 1.875rem;
   float: right;
    background-color: blue;
    color: #fff;
    padding: 10px;
    margin: 10px;

 }
 .img_ll{
    width:70px;
    height:65px;
 }
 
</style>